<template>
    <div>
        <!-- 导航区域 -->
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>服务功能</el-breadcrumb-item>
        <el-breadcrumb-item>摄影服务</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 搜索区域 -->
    <div style="margin: 10px 0">
        <el-button type="primary" style="margin-right: 20px;" @click="addopen"><el-icon><Plus /></el-icon>预约摄影服务</el-button>
        <el-select  v-model="photoname" placeholder="请选择预约项目"  style="width: 10%">
              <el-option v-for="item in phototypeList" :key="item.id" :label="item.photoname" :value="item.id">
              </el-option>
            </el-select>
        <el-input style="width: 200px; cursor: pointer" suffix-icon="el-icon-search" placeholder="请输入用户姓名" v-model="username"></el-input>
        <el-button type="primary" @click="getphotoList">搜 索</el-button>
        <el-button type="warning" @click="reset">重 置</el-button>
    </div>
    <!-- 主体区域 -->
    <el-table :data="photoList" border style="width: 100%">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="用户姓名" prop="username" />
      <el-table-column label="预约摄影时间" prop="phototime" />
      <el-table-column label="预约摄影项目">
        <template #default="scope">
          <div v-for="itme in phototypeList" :key="itme">
            <div v-if="itme.id == scope.row.photoproject">
              {{ itme.photoname }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="摄影预约审批">
          <template #default="scope">
              <div v-if="scope.row.photoreserva == 1">
                  预约成功
              </div>
              <div v-else-if="scope.row.photoreserva == -1">
                  预约失败
              </div>
              <div v-else>
                  等待审批<el-button size="small" type="primary" @click="handleEditpass(scope.row)">管 理</el-button>
              </div>
          </template>
      </el-table-column>
      <el-table-column label="预约备注" prop="photodesc" />
      <el-table-column label="宠物种类">
        <template #default="scope">
          <div v-for="itme in petstypeList" :key="itme">
            <div v-if="itme.id == scope.row.petstypeid">
              {{ itme.typename }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)">修 改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" v-model:current-page="pageNum"
                  :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
      </el-pagination>
    </div>
    <!-- 新增区域 -->
    <el-dialog v-model="dialogVisible" title="摄影服务信息" width="30%">
      <el-form label-width="70px" size="small">
        <el-form-item label="用户姓名">
          <el-input size="small" v-model="form.username" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户id">
          <el-input size="small" v-model="form.userid" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-input size="small" v-model="form.phototime" type="date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预约项目">
          <el-select clearable v-model="form.photoproject" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in phototypeList" :key="item.photoproject" :label="item.photoname" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="摄影预约审批">
          <el-select clearable v-model="form.photoreserva" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in photoreservas" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="预约备注">
          <el-input v-model="form.photodesc" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="宠物种类">
          <el-select clearable v-model="form.petstypeid" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in petstypeList" :key="item.petstypeid" :label="item.typename" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 审批区域 -->
    <el-dialog title="活动审批" v-model="dialogFormVisiblepass" width="30%">
        <el-form label-width="150px" size="small">
          审批活动
          <el-select v-model="form.photoreserva" placeholder="请选择">
            <el-option  v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
            </el-option>
          </el-select>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisiblepass = false">取 消</el-button>
            <el-button type="primary" @click="pass">确 认</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script>
    export default{
        name: "PhotoView",
      data() {
        return {
          photoList: [],
          phototypeList: [],
          petstypeList: [],
          dialogVisible: false,
          form: {},
          photoname: "",
          username: '',
          pageNum: 1,
          pageSize: 10,
          total: 0,
          dialogFormVisiblepass: false,
          options: [{
            value: '1',
            label: '预约成功'
          }, {
            value: '-1',
            label: '预约失败'
          },{
            value: '0',
            label: '等待审批'
          }],
        }
      },
      created() {
        this.getphotoList();
        this.getphototypeList();
        this.getpetstypeList();
      },
      methods:{
        //新增摄影框打开方法
        addopen(){
            this.form = {};
            this.dialogVisible =true;
        },
        //搜索框重置方法
        reset() {
          (this.photoname = ""), (this.username = ''), this.getphotoList();
        },
        handleSizeChange(pageSize) {
          this.pageSize = pageSize;
          this.getphotoList();
        },
        handleCurrentChange(pageNum) {
          this.pageNum = pageNum;
          this.getphotoList();
        },
        //修改模态框展开并且获取原本数据方法
        handleEdit(petsid) {
          this.dialogVisible = true;
          this.$http.get("/photo/" + petsid).then((res) => {
            if (res.data.status == 200) {
              this.form = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //删除摄影方法
        handleDelete(photoid) {
          this.$http.delete("/photo/" + photoid).then((res) => {
            if (res.data.status == 200) {
              this.$message.success("删除成功"), 
              this.getphotoList();
            } else {
              this.$message.error("删除失败");
            }
          });
        },
        //审批方法
        pass(){
          this.$http.post("/photo/pass/",this.form).then(res=>{
            if(res.data.status == 200){
              this.$message.success("审批成功");
            }else{
              this.$message.error(res.data.message);
            }
            this.dialogFormVisiblepass = false;
          })
        },
        //修改新增摄影方法
        save() {
          this.$http.post("/photo/", this.form).then((res) => {
            if (res.data.status == 200) {
                this.$message.success("保存成功"),
                this.dialogVisible = false,
                this.getphotoList();
            } else {
              this.$message.error(res.data.message);
            }
          });
          this.dialogFormVisiblepass = false;
        },
        //获取根据id获取摄影种类
        getphototypeList() {
          this.$http.get("/phototype").then((res) => {
            console.log(res.data);
            if (res.data.status == 200) {
              this.phototypeList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //获取根据id获取宠物种类
        getpetstypeList() {
          this.$http.get("/petstype").then((res) => {
            console.log(res.data);
            if (res.data.status == 200) {
              this.petstypeList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //获取摄影列表
        getphotoList() {
          //请求分页查询数据
          let params = {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            photoname: this.photoname,
            username: this.username,
          };
          this.$http.get("/photo/page", { params }).then((res) => {
            console.log(res);
            if (res.data.status == 200) {
              this.photoList = res.data.data.records;
              this.total = res.data.data.total;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //审批弹窗
        handleEditpass(row) {
            this.form = row,
                this.dialogFormVisiblepass = true;
                console.log(this.options.value);
        },
      }
    }
</script>

<style>
</style>